<template>
  <div class="section-item">
    <div class="section-wrapper" v-if="!data.config.showTitle && data.config.showTag">
      <Button
        v-show="data.config.showTag"
        :type="data.config.tagType"
        size="small"
        class="section-tag no-title"
      >{{getTagName()}}</Button>
      <div v-show="data.config.showTitle" class="section-title">{{view ? title :data.config.title}}</div>
      {{getContent()}}
    </div>

    <div class="section-wrapper" v-else>
      <Button
        v-show="data.config.showTag"
        :type="data.config.tagType"
        size="small"
        class="section-tag"
      >{{getTagName()}}</Button>
      <div v-show="data.config.showTitle" class="section-title">{{view ? title :data.config.title}}</div>
      <div class="section-content">{{getContent()}}</div>
    </div>

    <!-- 切题模式 -->
    <div class="switch-mode" v-if="data.config.mode === 'switch'">
      <Button size="small" type="primary" @click="prev">{{data.config.prevText}}</Button>
      <Button size="small" type="primary" @click="next">{{data.config.nextText}}</Button>
    </div>
  </div>
</template>

<script>
import { getSourceData } from '../common'
import { mapState } from 'vuex';
export default {
  props: ['data', 'file', 'view'],
  data () {
    return {
      current: 1,
      length: 1,
      checkName: '',

      tag: '',
      title: '',
      conten: '',
      switchData: []
    }
  },

  computed: {
    ...mapState({
      components: state => state.mark.components
    })
  },
  watch: {
    'data.config.mode' (next, prev) {
      if (next === 'switch') {
        this.current = 1
        this.length = this.data.config.switchData.length
        this.getTagName()
      }
    },
    'file.extend' () {
      this.dataHandle()
    }
  },
  methods: {
    // 数据处理
    dataHandle () {
      this.tag = '';
      this.title = '';
      this.conten = '';
      this.switchData = [];

      if (this.file) {
        let { tagSource, titleSource, contentSource, switchSource, tagName, title, content, switchData } = this.data.config;

        let { extend } = this.file;

        if (extend) {
          try {
            // 标签
            if (tagSource) {
              let tag = getSourceData(extend, tagSource);
              this.tag = tag;
            } else {
              this.tag = tagName;
            }

            // 标题
            if (titleSource) {
              let title1 = getSourceData(extend, titleSource);
              this.title = title1;
            } else {
              this.title = title
            }

            // 内容
            if (contentSource) {
              let content1 = getSourceData(extend, contentSource);
              this.content = content1;
            } else {
              this.content = content
            }

            // 切换的数据源
            if (switchSource) {
              let switchData1 = getSourceData(extend, switchSource);
              this.switchData = Array.isArray(switchData1) ? switchData1 : []
            } else {
              this.switchData = switchData
            }
          } catch (e) {
            console.log(e);
            this.$Message.error('数据获取出错');
          }
        }
      }
    },

    // 切题前的校验
    check () {
      let { checkedId } = this.data.config;
      if (checkedId.length === 0) {
        return true;
      } else {
        let check = true;
        checkedId.find(item => {
          // 校验这个组件下的value
          let value = ''
          this.components.find(unit => {
            if (unit.id === item) {
              value = unit.value;
              this.checkName = unit.config.labelName

              if ((this.checkName.indexOf(':') === this.checkName.length - 1) || this.checkName.indexOf('：') === this.checkName.length - 1) {
                this.checkName = this.checkName.substring(0, this.checkName.length - 1)
              }
              return true;
            }
          });

          if (value === '' || (value && value.length === 0)) {
            check = false;

            return true;
          }
        });

        return check
      }
    },

    // 上一页
    prev () {
      if (this.current === 1) {
        this.$Message.error('前面没有啦！');
        return;
      }

      let flag = this.check();
      if (!flag) {
        this.$Message.error(this.checkName ? `请输入${this.checkName}` : '存在未填写项');
        return;
      }

      this.current--;
    },

    // 下一页
    next () {
      if (this.current > this.length - 1) {
        this.$Message.error('已经是最后一条啦！');
        return;
      }

      let flag = this.check();
      if (!flag) {
        this.$Message.error(this.checkName ? `请输入${this.checkName}` : '存在未填写项');
        return;
      }

      this.current++;
    },

    // 获取文本信息
    getContent () {
      let text = '';
      let { content, switchData, mode } = this.data.config;
      if (content) {
        text = this.view ? this.content : content;
      }

      if (mode === 'switch') {
        let data = this.view ? this.switchData : switchData
        try {
          text = data[this.current - 1].content
        } catch (e) {
          console.log(e);
          this.$Message.error('数据有误')
        }
      };

      return text
    },

    // 获取标签名称
    getTagName () {
      let name = ''
      let { tagName, mode } = this.data.config
      if (tagName) {
        name = this.view ? this.tag : tagName
      }

      if (mode === 'switch') {
        name = `${name}(${this.current}/${this.length})`
      }

      return name
    },
    validate () {
      return true
    }
  },
  created () {
    this.dataHandle();
  }
}
</script>

<style lang="less" scoped>
.section-item {
  position: relative;
  padding: 10px;
  height: 100%;
  .ivu-btn-success {
    color: #81cd5f;
    background-color: #f0f9eb;
    border-color: #e4f4dc;
  }
  .ivu-btn-primary {
    color: #69b3ff;
    background-color: #ecf5ff;
    border-color: #e1f0ff;
  }
  .ivu-btn-warning {
    color: #f8b34d;
    background-color: #faebd6;
    border-color: #fcd294;
  }
  .ivu-btn-error {
    color: #f6795a;
    background-color: #fceeea;
    border-color: #fcd2c7;
  }
  .section-tag {
    float: left;
    &.no-title {
      margin-right: 10px;
    }
  }
  .section-title {
    clear: both;
    font-weight: bold;
    text-align: center;
  }
  .section-content {
    word-break: break-all;
    text-indent: 20px;
    &.no-title {
      float: left;
      margin-left: 4px;
    }
  }

  .switch-mode {
    position: absolute;
    right: 0;
    bottom: -40px;
    button:hover {
      color: #fff;
      background-color: #2d8cf0;
      border-color: #2d8cf0;
    }
  }

  .section-wrapper {
    height: 100%;
    overflow-y: auto;
  }
}
</style>
